<template>
	<view class="progress-container">
		<!-- 页面标题 -->
		<view class="page-title">当前申请进度</view>

		<!-- 状态展示核心区 -->
		<view class="status-card">
			<!-- 状态图标（根据状态切换） -->
			<view class="status-icon" :class="statusClass">
				<uv-icon :name="statusIcon" :color="statusColor" size="60" bold="true"></uv-icon>
			</view>

			<!-- 状态文字与说明 -->
			<view class="status-text" :style="{color: statusColor}">{{ statusText }}</view>
			<view class="status-desc" :style="{color: statusDescColor}">{{ statusDesc }}</view>

			<!-- 操作按钮/通过信息（根据状态切换） -->
			<view class="status-action">
				<!-- 申请中：仅展示进度提示 -->
				<view v-if="status === 'applying'" class="applying-tip">
					预计1-3个工作日完成审核，可随时刷新查看进度
				</view>

				<!-- 申请被拒：显示「修改申请」按钮 + 拒审原因 -->
				<view v-else-if="status === 'rejected'" class="rejected-wrap">
					<view class="reject-reason">
						未通过原因：{{ rejectReason }}
					</view>
					<button class="modify-btn" @click="toModify">
						修改申请
					</button>
				</view>

				<!-- 审核通过：显示商家账号/网址信息 -->
				<view v-else-if="status === 'approved'" class="approved-info">
					<view class="info-item">
						<view class="info-label">商家后台网址</view>
						<view class="info-value" @click="onCopy(approvedInfo.merchantUrl)">
							{{ approvedInfo.merchantUrl }}
						</view>
					</view>
					<view class="info-item">
						<view class="info-label">初始账号</view>
						<view class="info-value" @click="onCopy(approvedInfo.merchantAccount)">
							{{ approvedInfo.merchantAccount }}
						</view>
					</view>
					<button class="go-backend-btn" @click="toBackend">
						进入商家后台
					</button>
				</view>

				<view v-if="status === 'pay'" class="pay-tip">
					<uv-button text="支付保证金" @click="confirm"></uv-button>

					<wanl-pay-password :show="showPasswordModal" :value="paymentPassword" @submit="handlePasswordSubmit"
						@cancel="handleCancel" @setPayPwd="setPayPwd" @forgetPayPwd="forgetPayPwd"></wanl-pay-password>
				</view>
			</view>
		</view>

		<!-- 底部刷新按钮 -->
		<button class="refresh-btn" @click="refreshStatus">
			<uv-icon name="reload" color="#fe5400" size="24" bold="true" style="margin-right: 10rpx;"></uv-icon>
			刷新进度
		</button>
	</view>
</template>

<script>
	import WanlPayPassword from '@/components/wanl-pay-password/wanl-pay-password.vue';
	export default {
		components: {
			WanlPayPassword
		},
		data() {
			return {
				// 核心状态：applying(申请中) / rejected(被拒) / approved(通过) / pay(需缴费)
				status: "approved",
				// 拒审原因（状态为rejected时生效）
				rejectReason: "提交的营业执照信息模糊，请重新上传清晰照片",
				// 审核通过后信息（状态为approved时生效）
				approvedInfo: {
					merchantUrl: "https://www.bearing-mall.com",
					merchantAccount: "shop_001"
				},
				step: 0,
				showPasswordModal: false, // 控制显示密码输入框的状态
				paymentPassword: '', // 存储用户输入的支付密码
			};
		},
		computed: {
			// 根据状态动态生成样式/文字/颜色
			statusClass() {
				return {
					"applying-icon": this.status === "applying",
					"rejected-icon": this.status === "rejected",
					"approved-icon": this.status === "approved",
					"pay-icon": this.status === "pay"
				};
			},
			statusIcon() {
				switch (this.status) {
					case "applying":
						return "clock"; // 时钟图标（申请中）
					case "rejected":
						return "close-circle"; // 关闭图标（被拒）
					case "approved":
						return "checkmark"; // 对勾图标（通过）
					case "pay":
						return "empty-car";
					default:
						return "clock";
				}
			},
			statusColor() {
				switch (this.status) {
					case "applying":
						return "#165DFF"; // 蓝色（申请中）
					case "rejected":
						return "#FF4D4F"; // 红色（被拒）
					case "approved":
						return "#52C41A"; // 绿色（通过）
					case "pay":
						return "#ffaa00"; // 黄色（支付）
					default:
						return "#165DFF";
				}
			},
			statusText() {
				switch (this.status) {
					case "applying":
						return "申请审核中";
					case "rejected":
						return "申请已被拒绝";
					case "approved":
						return "审核通过";
					case "pay":
						return "缴纳保证金";
					default:
						return "申请审核中";
				}
			},
			statusDescColor() {
				return this.status === "rejected" ? "#FF4D4F" : "#666666";
			},
			statusDesc() {
				switch (this.status) {
					case "applying":
						return "您的入驻申请已提交，审核人员正在处理";
					case "rejected":
						return "请根据拒审原因修改信息后重新提交";
					case "approved":
						return "您已成功入驻，可使用下方信息登录商家后台";
					case "pay":
						let money = this.$store.state.common.appConfig.earnest_money ?? 5000;
						return "非授权贸易商需要缴纳"+ money +"元保证金";
					default:
						return "您的入驻申请已提交，审核人员正在处理";
				}
			}
		},

		onLoad(option) {

		},
		onShow() {
			this.loadData();
		},
		methods: {
			// 刷新进度（实际项目可对接接口拉取最新状态）
			refreshStatus() {
				this.$uv.toast("正在刷新进度...");
				this.loadData();
				this.$uv.toast("进度已刷新");
			},
			// 申请被拒：跳转至修改申请页面
			toModify() {
				this.$wanlshop.to("/pages/enter/apply/apply");
			},
			// 审核通过：跳转至商家后台（或复制网址）
			toBackend() {
				this.$wanlshop.msg('请复制链接后在电脑浏览器打开', 3000, true, 'none');
			},
			onCopy(str) {
				let that = this;
				uni.setClipboardData({
					data: str,
					success: function() {
						that.$wanlshop.msg('复制成功', 1500, true, 'success');
					}
				});
			},
			//确认支付
			confirm() {
				this.showPasswordModal = true;
			},

			// 处理密码提交
			handlePasswordSubmit(password) {
				this.paymentPassword = password;
				// 验证支付密码
				uni.request({
					url: '/wanlshop.shop/shopPayEarnestMoney',
					method: 'POST',
					data: {
						password: password
					},
					success: (res) => {
						if (res.res.code == 1) {
							this.$wanlshop.msg(res.res.msg, 2000, true, 'success');
							setTimeout(() => {
								this.loadData();
							}, 2000)
						} else {
							this.$wanlshop.msgJump(res.res.msg,'/pages/user/money/recharge')
						}
					},
					fail: (err) => {
						uni.showToast({
							icon: 'none',
							title: "失败: " + err.errMsg
						});
					}
				});

				this.showPasswordModal = false;
				this.paymentPassword = '';
			},
			// 关闭密码输入框
			handleCancel() {
				this.showPasswordModal = false;
				this.paymentPassword = '';
			},

			forgetPayPwd: function() {
				this.$wanlshop.to(
					`/pages/user/auth/validcode?event=forgetpaypwd&mobile=${this.$store.state.user.mobile}`)
			},
			setPayPwd: function() {
				this.$wanlshop.to(`/pages/user/auth/setpaypwd?mobile=${this.$store.state.user.mobile}`)
			},

			async loadData() {
				await uni.request({
					url: '/wanlshop.shop/getJoinInfo',
					method: 'POST',
					data: {},
					success: (res) => {
						uni.hideLoading();
						let data = res.res.data;
						let step = data.step.step;
						if (step == -1) {
							this.status = 'rejected';
							this.rejectReason = data.refuse;
						} else if (step == 0) {
							this.status = 'approved';
							this.approvedInfo.merchantUrl = data.step.shop_login_url;
							this.approvedInfo.merchantAccount = data.step.account_name;
						} else if (step == 2) {
							this.status = 'pay';
						} else if (step == 3) {
							this.status = 'applying';
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '加载失败，请检查网络'
						});
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.progress-container {
		width: 100%;
		height: 100vh;
		/* 延续统一的暖色调背景 */
		background: linear-gradient(135deg, #fff8f5 0%, #fff0ea 100%);
		background-image:
			radial-gradient(rgba(254, 84, 0, 0.02) 1px, transparent 1px),
			radial-gradient(rgba(254, 84, 0, 0.02) 1px, transparent 1px);
		background-size: 50rpx 50rpx;
		background-position: 0 0, 25rpx 25rpx;
		padding: 60rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 页面标题 */
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 80rpx;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
	}

	/* 状态卡片：核心内容容器 */
	.status-card {
		width: 100%;
		background: #fff;
		border-radius: 30rpx;
		padding: 80rpx 30rpx;
		box-sizing: border-box;
		box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.05);
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 60rpx;
	}

	/* 状态图标容器 */
	.status-icon {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 40rpx;
	}

	.applying-icon {
		background: rgba(22, 93, 255, 0.1);
	}

	.rejected-icon {
		background: rgba(255, 77, 79, 0.1);
	}

	.approved-icon {
		background: rgba(82, 196, 26, 0.1);
	}

	/* 状态文字 */
	.status-text {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	/* 状态说明文字 */
	.status-desc {
		font-size: 26rpx;
		line-height: 1.6;
		text-align: center;
		margin-bottom: 60rpx;
		padding: 0 20rpx;
	}

	/* 状态操作区：按状态区分样式 */
	.status-action {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 申请中：提示文字 */
	.applying-tip {
		font-size: 26rpx;
		color: #666;
		text-align: center;
		line-height: 1.6;
	}

	/* 申请被拒：拒审原因 + 修改按钮 */
	.rejected-wrap {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.reject-reason {
		font-size: 26rpx;
		color: #FF4D4F;
		margin-bottom: 40rpx;
		text-align: center;
		line-height: 1.6;
	}

	/* 审核通过：信息列表 */
	.approved-info {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 40rpx;
		margin-bottom: 60rpx;
	}

	.info-item {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.info-label {
		font-size: 24rpx;
		color: #999;
	}

	.info-value {
		font-size: 28rpx;
		color: #333;
		padding: 20rpx;
		background: #fafafa;
		border-radius: 16rpx;
		word-break: break-all;
	}

	/* 按钮样式 */
	button {
		width: 80%;
		height: 90rpx;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: bold;
		border: none;
		box-shadow: 0 8rpx 24rpx rgba(254, 84, 0, 0.2);
		transition: all 0.3s ease;
	}

	button::after {
		border: none;
	}

	button:active {
		transform: scale(0.98);
		box-shadow: 0 5rpx 15rpx rgba(254, 84, 0, 0.15);
	}

	/* 修改申请按钮 */
	.modify-btn {
		background: #fe5400;
		color: #fff;
	}

	/* 进入后台按钮 */
	.go-backend-btn {
		background: #fe5400;
		color: #fff;
	}

	/* 刷新按钮 */
	.refresh-btn {
		background: rgba(254, 84, 0, 0.1);
		color: #fe5400;
	}
</style>